<template>
  <div class="maintain-page-container">
    <div class="maintain-page-title">{{ $t('系统维护') }}</div>
    <div class="maintain-page-operation">
      <el-button
        type="primary"
        @click="handleSave"
        v-has="'SYS_PRESERVE_SAVE'"
        size="small"
        >{{ $t('保存') }}</el-button
      >
      <el-button
        type="primary"
        @click="handleClear"
        v-has="'SYS_PRESERVE_SAVE'"
        size="small"
        >{{ $t('手动清除') }}</el-button
      >
    </div>
    <el-form class="maintain-page-form">
      <el-form-item class="maintian-form-item">
        <el-checkbox
          class="maintain-item-cate"
          :label="$t('终端日志')"
          v-model="form.terminalLog"
        ></el-checkbox>
        <el-checkbox
          :label="$t('自动')"
          v-model="form.terminalAuto"
        ></el-checkbox>
        <el-date-picker
          class="maintain-item-date"
          size="small"
          v-model="form.terminalDate"
          v-show="!form.terminalAuto"
          type="date"
          :placeholder="$t('选择日期')"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
        <el-select
          class="maintain-item-date"
          v-model="form.terminalDuration"
          :placeholder="$t('选择日期')"
          v-show="form.terminalAuto"
          size="small"
        >
          <el-option
            v-for="item in singleoptions"
            :key="item.value"
            :label="$t(item.label)"
            :value="item.value"
          ></el-option>
        </el-select>
        <span class="maintain-item-tip">{{ $t('以前') }}</span>
      </el-form-item>
      <el-form-item class="maintian-form-item">
        <el-checkbox
          class="maintain-item-cate"
          :label="$t('用户日志')"
          v-model="form.userLog"
        ></el-checkbox>
        <el-checkbox
          :label="$t('自动')"
          v-model="form.userLogAuto"
        ></el-checkbox>
        <el-date-picker
          class="maintain-item-date"
          size="small"
          v-model="form.userLogDate"
          type="date"
          :placeholder="$t('选择日期')"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          v-show="!form.userLogAuto"
        ></el-date-picker>
        <el-select
          class="maintain-item-date"
          v-model="form.userLogDuration"
          :placeholder="$t('选择日期')"
          size="small"
          v-show="form.userLogAuto"
        >
          <el-option
            v-for="item in singleoptions"
            :key="item.value"
            :label="$t(item.label)"
            :value="item.value"
          ></el-option>
        </el-select>
        <span class="maintain-item-tip">{{ $t('以前') }}</span>
      </el-form-item>

      <el-form-item class="maintian-form-item">
        <el-checkbox
          class="maintain-item-cate"
          :label="$t('媒体资源')"
          v-model="form.mediaResource"
        ></el-checkbox>
        <el-checkbox
          :label="$t('自动')"
          v-model="form.mediaResourceAuto"
        ></el-checkbox>
        <el-date-picker
          v-model="form.mediaResourceDate"
          class="maintain-item-daterange"
          v-show="!form.mediaResourceAuto"
          @change="handleChange"
          :placeholder="$t('选择日期')"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
        <el-select
          class="maintain-item-date"
          size="small"
          v-show="form.mediaResourceAuto"
          v-model="form.mediaResourceDuration"
          type="date"
          :placeholder="$t('选择日期')"
        >
          <el-option
            v-for="item in singleoptions"
            :key="item.value"
            :label="$t(item.label)"
            :value="item.value"
          ></el-option>
        </el-select>
        <span class="maintain-item-tip">{{ $t('以前') }}</span>
      </el-form-item>
      <el-form-item class="maintian-form-item">
        <el-checkbox
          class="maintain-item-cate"
          :label="$t('终端资源')"
          v-model="form.terminalResource"
          @change="onTerminalResCheck"
        ></el-checkbox>
        <el-checkbox
          :label="$t('自动')"
          v-model="form.terminalResourceAuto"
        ></el-checkbox>
        <el-date-picker
          class="maintain-item-date"
          size="small"
          v-model="form.terminalResourceDate"
          type="date"
          :placeholder="$t('选择日期')"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          v-show="!form.terminalResourceAuto"
        ></el-date-picker>
        <el-select
          class="maintain-item-date"
          v-show="form.terminalResourceAuto"
          v-model="form.terminalResourceDuration"
          :placeholder="$t('选择日期')"
          size="small"
        >
          <el-option
            v-for="item in singleoptions"
            :key="item.value"
            :label="$t(item.label)"
            :value="item.value"
          ></el-option>
        </el-select>
        <span class="maintain-item-tip">{{ $t('以前') }}</span>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import SystemApi from '@/api/system'
export default {
  name: 'SystemMaintainPage',
  data() {
    return {
      form: {
        terminalLog: false,
        playLog: false,
        userLog: false,
        terminalResource: false,
        mediaResource: false,
        terminalAuto: false,
        playLogAuto: false,
        userLogAuto: false,
        terminalResourceAuto: false,
        mediaResourceAuto: false,
        terminalDate: '',
        playLogDate: '',
        userLogDate: '',
        terminalResourceDate: '',
        mediaResourceDate: '',
        terminalDuration: 1,
        playLogDuration: 1,
        userLogDuration: 1,
        terminalResourceDuration: 1,
        mediaResourceDuration: 1,
      },
      singleoptions: [
        {
          value: 1,
          label: this.$t('2天'),
        },
        {
          value: 2,
          label: this.$t('1周'),
        },
        {
          value: 3,
          label: this.$t('1月'),
        },
        {
          value: 4,
          label: this.$t('3月'),
        },
        {
          value: 5,
          label: this.$t('6月'),
        },
        {
          value: 6,
          label: this.$t('1年'),
        },
      ],
      pickerOptions: {},
      saveParam: { code: 'sysPreserve', name: '系统维护', value: {
        terminalLog:0,
        userLog:0,
        terminalResource:0,
        mediaResource:0,
      } },
    }
  },

  mounted() {
    this.$nextTick(() => {
      this.initMaintainConfig()
    })
  },

  methods: {
    handleChange(val) {
      console.log('date select = :' + val)
    },
    async handleClear() {
      console.log('handleClear ----------')
      let params = {}
      if (
        this.form.terminalLog &&
        this.form.terminalDate &&
        !this.form.terminalAuto
      ) {
        params.terminalLog = this.form.terminalDate + ' 23:59:59'
      }
      if (
        this.form.userLog &&
        this.form.userLogDate &&
        !this.form.userLogAuto
      ) {
        params.userLog = this.form.userLogDate + ' 23:59:59'
      }
      if (
        this.form.terminalResource &&
        this.form.terminalResourceDate &&
        !this.form.terminalResourceAuto
      ) {
        params.terminalResource = this.form.terminalResourceDate + ' 23:59:59'
      }
      if (
        this.form.mediaResource &&
        this.form.mediaResourceDate &&
        !this.form.mediaResourceAuto
      ) {
        params.mediaResource = this.form.mediaResourceDate + ' 23:59:59'
      }
      if (!this.form.terminalLog&&!this.form.userLog&&!this.form.terminalResource&&!this.form.mediaResource) {
        this.$message.error('无效操作')
        return
      }
      if (!this.form.terminalDate&&!this.form.userLogDate&&!this.form.terminalResourceDate&&!this.form.mediaResourceDate) {
        this.$message.error('无效操作')
        return
      }
      const result = await SystemApi.systemLogClear(params)
      if (result && result.code == 200) {
        this.$message.success('清除成功')
      }
    },
    onTerminalResCheck(val) {
      if (val) {
        this.$alert(this.$t('提示'), this.$t('已勾选终端资源，请谨慎操作'))
      }
      console.log('onTerminalResCheck-------------', val)
    },
    handleSave() {
      //接口提交
      if (this.form.terminalLog&&this.form.terminalAuto) {
        this.saveParam.value.terminalLog = this.form.terminalDuration
      }else{
        this.saveParam.value.terminalLog = 0
      }
      if (this.form.userLog&&this.form.userLogAuto) {
        this.saveParam.value.userLog = this.form.userLogDuration
      }else{
        this.saveParam.value.userLog = 0
      }
      if (this.form.terminalResource&&this.form.terminalResourceAuto) {
        this.saveParam.value.terminalResource = this.form.terminalResourceDuration
      }else{
        this.saveParam.value.terminalResource = 0
      }
      if (this.form.mediaResource&&this.form.mediaResourceAuto) {
        this.saveParam.value.mediaResource = this.form.mediaResourceDuration
      }else{
        this.saveParam.value.mediaResource = 0
      }
      // if (!this.form.terminalLog&&!this.form.userLog&&!this.form.terminalResource&&!this.form.mediaResource) {
      //   this.$message.error('无效操作')
      //   return
      // }
      this.$store
        .dispatch('system/updateSystemConfig', this.saveParam)
        .then((res) => {
          
          this.$success('upd')
          
        })
    },
    initMaintainConfig() {
      let params = { code: 'sysPreserve' }
      this.$store.dispatch('system/getSystemConfig', params).then((res) => {
        if (res) {
          const configForm = res.jsonValue
          if ('terminalLog' in configForm&&configForm.terminalLog>0) {
            this.form.terminalLog = true
            this.form.terminalAuto = true
            this.form.terminalResourceDuration = configForm['terminalLog']
          }
          // if('playLog' in configForm){
          //   this.form.playLog = true
          //   this.form.playLogAuto = true
          //   this.form.playLogDuration = configForm['playLog']
          // }
          if ('userLog' in configForm&&configForm.userLog>0) {
            this.form.userLog = true
            this.form.userLogAuto = true
            this.form.userLogDuration = configForm['userLog']
          }
          if ('terminalResource' in configForm&&configForm.terminalResource>0) {
            this.form.terminalResource = true
            this.form.terminalResourceAuto = true
            this.form.terminalResourceDuration = configForm['terminalResource']
          }
          if ('mediaResource' in configForm&&configForm.mediaResource>0) {
            this.form.mediaResource = true
            this.form.mediaResourceAuto = true
            this.form.mediaResourceDuration = configForm['mediaResource']
          }
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
// import '@/styles/bs-common.scss';
.maintain-page-container {
  background: $bg-ff;
  .el-checkbox__label{font-size: 13px;}
  .el-divider--horizontal {
    margin: 0;
    background: 0 0;
    border-top: 1px solid $bg-e9;
  }
  .maintain-page-title {
    width: 100%;
    height: 44px;
    line-height: 44px;
    padding-left: 20px;
    font-size: 15px;
    font-weight: 400;
    border-bottom:1px solid #e9e9e9;
  }
  .maintain-page-operation {
    margin-top: 10px;
    margin-left: 15px;
    .el-button {
      // width: 88px;
      margin-right: 10px;
      margin-left: 0px;
    }
    .el-button--medium {
      padding: 10px 10px;
    }
  }
  .maintain-page-form {
    margin-top: 10px;
    margin-left: 15px;
    .maintian-form-item {
      margin: 10px 0;
      .maintain-item-cate {
        margin-right: 60px;
      }
      .maintain-item-date {
        margin-left: 18px;
        margin-right: 18px;
        width: 160px;
      }
      .maintain-item-daterange {
        margin-left: 18px;
        margin-right: 18px;
        width: 160px;
      }
      .maintain-item-tip {
        font-size: $font-size-13;
        color: $font-66;
      }
    }
  }
}
</style>